<!--  -->
<template>
  <div class="">
    <div v-if="!huanhang">
      <span class="lable-l">{{ label }}</span>
      <span v-if="shuzi" class="lable-r-mon shuziziti">￥ {{ numFormat(value) || '-' }}</span>
      <span v-else class="lable-r">{{ value || '-' }}</span>
    </div>
    <van-row class="c1" v-else>
      <van-col span="6">
        <span class="c2">{{ label }}</span>
      </van-col>
      <van-col span="18" style="text-align: right">
        <span class="c3">{{ value || '-' }}</span>
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
import { numFormat } from '@/utils/util.js'
numFormat
const props = defineProps({
  label: {
    type: String,
    value: ''
  },
  value: {
    type: String,
    value: '-'
  },
  shuzi: {
    type: Boolean,
    value: false
  },
  //   是否换行
  huanhang: {
    type: Boolean,
    value: false
  }
})
</script>

<style lang="less" scoped>
/* components/note/note.wxss */
.lable-l {
  font-size: 28px;
  color: #666;
  vertical-align: super;
  width: 30%;
  display: inline-block;
}
.lable-r {
  font-size: 28px;
  color: #222;
  position: absolute;
  right: 30px;
  text-align: right;
  display: inline-block;
  width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lable-r-huanhang {
  font-size: 28px;
  color: #222;
  /* position: absolute;
    right: 30px; */
  text-align: right;
  display: inline-block;
  width: 68%;
  position: relative;
  vertical-align: super;
  /* margin-right: 10px; */
  /* margin-left: 40%; */
  /* white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis; */
}

.lable-r-mon {
  position: absolute;
  right: 30px;
  color: #ff6058;
  font-size: 28px;
  font-weight: bold;
}
.c1 {
  margin-bottom: 6px;
}
.c2 {
  font-size: 28px;
  color: #666;
  display: inline-block;
  margin-bottom: 12px;
}
.c3 {
  text-align: right;
  display: inline-block;
  word-break: break-all;
  font-size: 28px;
  color: #222;
  margin-bottom: 12px;
}
</style>
